@charset "utf-8";
@import "reset";

@function r($px) {
    @return $px/100px * 1rem;
}

body{
    background-color: #1e1e1e;
.web{
    width: r(640px);
    header{
        margin: 0 auto;
        width: r(611px);
        height: r(87px);
        background-color: #1e1e1e;
        display: flex;
        justify-content: flex-start;
        position: relative;
        border-bottom: 1px solid #484848;
        .web1{
            width: r(50px);
            height: r(50px);
            background-color: #b60005;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            margin: r(20px) r(26px) 0 0;
        p{
            text-align: center;
            font-size: 12px;
            color: #FFFFFF;
            margin-top: r(5px);
        }
        }
        .max{
            height: 44px;
            position: relative;
            
        i{
            color: #FFFFFF;
            position: absolute;
            left: 15px;
            top: 14px;
            z-index: 2;
        }
        input{
            width: r(530px);
            height: 26px;
            font-size: 11px;
            background-color: #1E1E1E;
            border-radius: 50px;
            border: 1px solid #d2d2d2;
            padding-left: 40px;
            margin: r(20px) r(10px) r(10px) r(10px);
            color: #7e7e7e;
            position: absolute; 
            }
            
        }
    }
    .mian{
            .miz{
            font-size: 0;
            margin-top: r(30px);
            margin-bottom: r(15px); 
            text-align: center;
            position: relative;
            img{
                width: 20%;
            }
        
        .mix{
            width: r(33px);
            height: r(34px);
            position: absolute;
            background-color: #ff0000;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            left: 58%;
            top: 10%;
            p{  
                text-align: center;
                font-size: 8.5px;
                color: #FFFFFF;
            }
        }    
    }    
        
        .min{
            width: r(210px);
            height: 15px;
            margin: 0 auto;
            display: flex;  
            justify-content: space-between;
            color: #FFFFFF;
            h3{
               font-size: 12px;
            }
            p{
                text-align: center;
                font-size: 7.5px;
                border: 1px solid #c3c3c3;
                padding-right: r(10px);
                margin-right: r(15px);
            }
        }
        .miv{
            width: r(640px);
            height: r(60px); 
            line-height: r(10px);
            text-align: center;
            i{  
                color: #eeca02;
            }
        }
        .tion{
            margin: 0 auto;
            width: r(220px);
            height: r(23px);
            display: flex;
            justify-content: space-between;
            .fei{
                 display: flex;
                 justify-content: center;
                h3{
                    font-size: 12.5px;
                    color: #FFFFFF;
                    margin-right: r(7px);
                }
               p{
                   font-size: 9px;
                   color: #a80309;
                   margin-top: r(4px);
               }
            }
            .bnm{
                p{
                    margin:0 r(12px)0 r(9px);
                    width: r(2px);
                    height: r(22px);
                    color: #a8a8a8;
                }
            }
            .fen{
                 display: flex;
                 justify-content: center;
                h3{
                    font-size: 12.5px;
                    color: #FFFFFF;
                    margin-right: r(7px);
                }
               p{
                   font-size: 9px;
                   color: #a80309;
                   margin-top: r(3px);
               }
            }
        }
        .tix{
            width: r(460px);
            height: r(52px);
            text-align: center;       
            display: flex;
            justify-content:space-between;
            margin: r(20px) r(90px) r(25px) r(90px);
            p{
               width: r(219px);
               font-size: 11.5px;
               color: #FFFFFF; 
               text-align: center;
               border-radius: 20px;
               background-color: #b60005;
               padding-top: r(10px);
            }
            .tiz{
                background-color: #cdcdcd;
            }
        }
        .box {
                width: r(640px);
                background: #222222;
                border-top: r(24px) solid #303030;
            }
            
            .box ul {
                width: 100%;
                margin: 0;
                padding: 0;
            }
            
            .box li {
                list-style: none outside none;
                display: block;
                margin: 0;
                padding: 0;
                height: r(88px);
                width: 100%;
                overflow: hidden;
                background: #222222;
                transition-delay: 0.5s;
            }

            .box h3 {
                font-size: r(20px);
                margin: 0;
                height: r(80px);
                color: #7f7f7f;
                background: #222222;
                cusor: pointer;
                position:relative;
                padding-left: r(34px);
                border-bottom: 1px solid #454545;
                padding-top: r(20px);
            }
            span{
                margin-left: r(490px);
                margin-right: 20px;
            } 
            .bom{
                margin-left: r(475px);
            }
            .box li:hover {
                height: r(270px);
            }
            
            .box li:hover h3 {
                color: #7f7f7f;
                background: #222222;
            }
            
            .box div {
                margin: 0;
                color: #FFFFFF;
                text-align: center;
                font-size: r(21px);
                z-index: 2;
                padding-left: r(34px);
                padding-top: r(40px);                
            }
            .box li h3 span{
                transition: all 0.3s;
                 display: inline-block;
            }
            .box li:hover h3 span{
                transform: rotateZ(90deg);
            }
        }
        .bok{  
                margin: 0 auto;
                width: r(180px);
                height: r(52px);
                border-radius: 20px;
                background-color: #b60005;
                p{ 
                   margin-top: r(45px);
                   color: #FFFFFF; 
                   font-size: 11px;
                   text-align: center;
                   padding-top: r(11px);
                   a{
                       color: #FFFFFF;
                   }
                }
        }
      }
    }
  
